<template>
    <div style="background-color: #F5F5F5;">
        <el-container style="width: 70%;margin: 0 auto;">
            <!--页头-->
            <el-header style="width: 0;height: 0"></el-header>
            <Header></Header>

            <div @click="goBack" style="position: absolute">
                <h3><i class="el-icon-back"></i>返回</h3>
            </div>

            <el-main style="height: 800px;background-color:#8FC0A9;">
                <div style="text-align: center;margin: 0 auto;padding: 50px;">
                    <h3>{{sport.sportName}}</h3>
                    <el-divider></el-divider>
                    <img :src="sport.sportOther"  style="width: 500px;height: 500px;">
                    <h5>{{sport.sportContext}}</h5>
                    <h5>参与方式：{{sport.sportAttendWay}}</h5>
                    <img :src="sport.sportConversationNumber" style="height: 300px;width: 300px">
                    <h5>日期：{{sport.sportUpdateTime}}</h5>

                </div>
            </el-main>


            <Footer></Footer>
        </el-container>
    </div>
</template>

<script>
    import Header from "../components/Header";
    import Footer from "../components/Footer";
    import SockJS from 'sockjs-client';
    import Stomp from 'stompjs';

    export default {
        name: "Chat",
        components:{
            Header,
            Footer
        },

        data(){
            return{
                sport:{
                    sportId: 1,
                    sportName: "创益策划大赛",
                    sportAuthor: 1,
                    sportIntroduceBased: "面向华农全体学生征集的社会公益项目，倡导大学生积极创新用于实践的比赛",
                    sportContext: "1、报名；2、集中培训；3、线下比赛评比",
                    sportAttendWay: "线下参与",
                    sportConversationNumber: "2.jpg",
                    sportOther: "1.jpg",
                    sportVersion: "1",
                    sportCreateTime: "2020-08-20T15:13:37.000+0000",
                    sportUpdateTime: "2020-08-20T15:13:37.000+0000",
                }
            }
        },

        methods:{
            goBack(){
                this.$router.push("/sport");
            },
        },

        created() {
            let sportID = localStorage.getItem("sportID");
            this.$http({
                url:'http://localhost:8083/sport/showOne',
                method:'POST',
                params:{
                    "sportID":sportID,
                }
            }).then(res=>{
                console.log(res.data)
                this.sport = res.data;
                this.sport.sportOther = require("../assets/sportImage/" + this.sport.sportOther);
                this.sport.sportConversationNumber = require("../assets/sportImage/" + this.sport.sportConversationNumber);

            }).catch(err=>{
                console.log(err);
            })
        }
    }
</script>

<style scoped>

</style>